import React, {useState, useEffect} from 'react';
import { NavLink } from 'react-router-dom';

const Useeffect = () => {
  const [count, setCount] = useState(0);
  // useEffect的作用是将生命周期引入到函数组件中
  const [food, setFood] = useState('rice');
  useEffect(()=>{
    console.log(666);
    document.title = `当前点击次数:${count}`;
    return ()=>{
      // 相当于componentWillUnmount  位置是第一个参数的最后
      console.log('componentWillUnmount');
    }
    // 第一个参数是修改数据或者初始化时的副作用
    // 第二个参数是依赖
    // 1.如果没有第二个参数，就是componentDidMount+componentDidUpdate
    // 2.如果是空数组,就是componentDidMount,更新时不执行
    // 3.如果数组中有内容，仅在这些变量更新时执行
  }, [count, food])
  return (
    <div>
      <p>需求：点击按钮，修改count，而且页面的标题也会更新，显示点击的次数</p>
      <button onClick={()=>setCount(count+1)}>当前点击次数:{count}</button>
      <button onClick={()=>setFood('hotpot')}>吃火锅:{food}</button>
      <NavLink to="/">回首页</NavLink>
    </div>
  );
}

export default Useeffect;
